<template>
  <div style="height: 100%">
    <template v-if="records && records.length > 0">
      <el-timeline>
        <el-timeline-item
          v-for="(record, index) in records"
          :key="index"
          :icon="record.icon"
          :type="record.type"
          color="#67C23A"
          :size="record.size"
        >
          <template v-if="index === records.length - 1">
            <el-link :underline="false">{{ $t('label.originalVersion') }}</el-link>
          </template>
          <template v-else>
            <el-link :underline="false" type="primary">{{ record.createdBy }}</el-link>
            <el-link class="ml10" :underline="false" type="info">{{ $t('label.upgrade') }}</el-link>
          </template>
          <el-link :underline="false" type="info" class="pull-right" icon="iconfont iconshijian">{{
            record.createdAt
          }}</el-link>

          <el-row class="mt8">
            <el-col :span="6"
              ><span class="item-label">{{ $t('label.version2') }}</span
              ><span class="item-text">{{ record.version }}</span
              ><el-link
                v-if="index === records.length - 1"
                class="pull-right"
                type="primary"
                @click="getUpgradeRecordDetail(record.id, true)"
                >{{ $t('btnText.detail') }}</el-link
              ><el-link v-else class="pull-right" type="primary" @click="getUpgradeRecordDetail(record.id, false)">{{
                $t('btnText.detail')
              }}</el-link></el-col
            >
          </el-row>
        </el-timeline-item>
      </el-timeline>
    </template>
    <el-empty v-else :description="$t('error.noPublishRecord')"></el-empty>

    <!-- 版本升级详情窗口 -->
    <el-dialog
      class="dialog-upgrade"
      :title="version"
      :visible.sync="dialogUpgrade.visible"
      width="920px"
      :close-on-click-modal="dialogUpgrade.closeOnClickModal"
      :close-on-press-escape="dialogUpgrade.closeOnPressEscape"
      append-to-body
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <el-row class="border-bottom-dashed" v-if="formdata.platformType === 1 || formdata.platformType === 2">
        <el-col>
          <span class="item-label">{{ $t('label.urlPc2') }}</span>
          <span class="item-text">{{ detail.urlPc }}</span>
        </el-col>
      </el-row>
      <el-row class="border-bottom-dashed" v-if="formdata.platformType === 1 || formdata.platformType === 3">
        <el-col>
          <span class="item-label">{{ $t('label.urlApp2') }}</span>
          <span class="item-text">{{ detail.urlApp }}</span>
        </el-col>
      </el-row>
      <el-row class="border-bottom-dashed">
        <el-col>
          <span class="item-label">{{ $t('label.meteringJson2') }}</span>
          <span class="item-text">{{ detail.meteringJson }}</span>
        </el-col>
      </el-row>
      <el-row v-if="!detail.isOriginal">
        <el-col>
          <span class="item-label">{{ $t('label.upgradeExplain2') }}</span>
          <span class="item-text">{{ detail.upgradeExplain }}</span>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogUpgrade.visible = false">{{ $t('btnText.cancel') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUpgradeRecords, getUpgradeRecordDetail } from '../../api/api';
export default {
  name: 'upgradeRecords',
  props: {
    formdata: {
      type: Object,
      default: () => {}
    },
    updateTime: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      records: [],
      detail: {},
      dialogUpgrade: {
        visible: false,
        closeOnClickModal: false,
        closeOnPressEscape: false
      }
    };
  },
  watch: {
    updateTime(val) {
      this.getUpgradeRecords();
    }
  },
  computed: {
    version() {
      return this.$t('label.v') + ' ' + this.detail.version;
    }
  },
  methods: {
    getUpgradeRecords() {
      getUpgradeRecords({ id: this.formdata.id }).then(res => {
        console.info('升级记录', res.data);
        this.records = res.data;
      });
    },
    getUpgradeRecordDetail(id, isOriginal) {
      getUpgradeRecordDetail({ id: id }).then(res => {
        console.info('升级详情', res.data);
        this.detail = res.data;
        this.detail.isOriginal = isOriginal;
        this.dialogUpgrade.visible = true;
      });
    }
  }
};
</script>

<style lang="scss">
.dialog-upgrade .el-col {
  line-height: 24px;
}
.dialog-upgrade .el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}
</style>
<style lang="scss" scoped>
.el-empty {
  width: 100%;
}
.el-col {
  padding: 8px 0;
}
.border-bottom-dashed {
  border-bottom: 1px dashed #ebeef5;
}
.ml10 {
  margin-left: 10px;
}
.mt8 {
  margin-top: 8px;
}
.dashedBorderBottom {
  border-bottom: 1px dashed #ebeef5;
}
.item-label {
  color: #909399;
}
.item-text {
  padding-left: 10px;
}
.pull-right {
  float: right;
}
::v-deep .el-link > i {
  margin-right: 5px;
}
</style>
